<template>
  <div>
    <div class="item">
       <router-link :to="{
        name:'detail',
        params:{
          id:item.albumId
        },
        query:{
          anchorId:item.anchorId,
          userNickname:item.albumUserNickName
        }
      }" >
        <img :src="'http://imagev2.xmcdn.com/'+item!.albumCoverPath">
        <div class="info-bar">
          <van-icon name="play-circle" />
          <p class="count">{{ count }}</p>
        </div>
        <p class="desc">{{ item!.albumTitle }}</p>
       </router-link>
      </div>
  </div>
</template>

<script setup lang="ts">
// import {formatNumber} from '../../../utils/formatNumber'
let props=defineProps<{
  item?:any
}>();

</script>

<style lang="less" scoped>
 .item{  
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    width: 100px;
    img{
      width: 100%;
    }
    .info-bar{
      background-image: linear-gradient(180deg,rgba(3,3,3,0) 9%,rgba(0,0,0,0.58) 100%);
      width: 100%;
      height: 28px;
      line-height: 34px;
      border-radius: 0 0 4px 4px;
      display: flex;
      align-items: center;
      position: absolute;
      left: 0;
      top: 75px;
      font-size: 16px;
      color: #fff;
      .count{
      font-size: 12px;
      margin-left: 5px;
    }
    }
    .desc{
      font-size: 13px;
      color: #333;
      font-weight: 400;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
    }
   
  }
</style>